$(function() {
	function e(e) {
		var o = {};
		return (
			(o[Q.Styles.SHAPE_FILL_COLOR] = e),
			(o[Q.Styles.SHAPE_STROKE] = 0.5),
			(o[Q.Styles.SHAPE_STROKE_STYLE] = "#CCC"),
			(o[Q.Styles.LABEL_BACKGROUND_COLOR] = "#FF0"),
			(o[Q.Styles.SHAPE_FILL_COLOR] = e),
			(o[Q.Styles.LABEL_SIZE] = {
				width: 100,
				height: 20,
			}),
			(o[Q.Styles.LABEL_PADDING] = 5),
			(o[Q.Styles.LABEL_OFFSET_Y] = -10),
			(o[Q.Styles.SHAPE_FILL_GRADIENT] = r),
			(o[Q.Styles.LABEL_POSITION] = Q.Position.CENTER_TOP),
			(o[Q.Styles.LABEL_ANCHOR_POSITION] = Q.Position.LEFT_BOTTOM),
			o
		);
	}

	Q.registerImage("lamp", Q.Shapes.getShape(Q.Consts.SHAPE_CIRCLE, -8, -8, 16, 16));
	var r = new Q.Gradient(
		Q.Consts.GRADIENT_TYPE_RADIAL,
		[Q.toColor(2868903935), Q.toColor(871296750), Q.toColor(1149798536), Q.toColor(862348902)],
		[0.1, 0.3, 0.7, 0.9],
		0,
		-0.2,
		-0.2
	);
	$(".graph-editor").graphEditor({
		data: "data/topo2.json",
		images: [
			// { name: "Custom Images", images: graphs },
			{
				name: "Cisco图标",
				root: "data/cisco/",
				images: [
					"ATMSwitch.png",
					"multilayerSwitch.png",
					"workgroupSwitch.png",
					"workgroupSwitchSubdued.png",
					"100BaseT_hub.png",
					"cisco_hub.png",
					"switch1100.png",
				],
			},
			{
				name: "自定义图标",
				imageWidth: 30,
				imageHeight: 30,
				images: [
					{ image: "lamp", properties: { name: "Message" }, styles: e("#F00") },
					{
						image: "lamp",
						properties: { name: "Message" },
						br: !0,
						styles: e("#FF0"),
					},
					{ image: "lamp", properties: { name: "Message" }, styles: e("#0F0") },
					{
						image: "lamp",
						properties: { name: "Message" },
						styles: e("#0FF"),
					},
					{ image: "lamp", properties: { name: "Message" }, styles: e("#00F") },
					{
						image: "lamp",
						properties: { name: "Message" },
						styles: e("#F0F"),
					},
				],
			},
		],
		callback: function(e) {
			function r(e, r) {
				var o = t;
				return (e = Math.round(e / o) * o), (r = Math.round(r / o) * o), [e, r];
			}

			var o = e.graph,
				i = (o.styles = {});

			//增加删除按钮
			var graph = o,
				editor = e;
			var deleteButton = Q.createButton({
				name: "Delete",
				action: function() {
					graph.removeSelection();
				},
			});
			deleteButton.style.backgroundColor = "#2898E0";
			deleteButton.style.color = "#FFF";
			editor.toolbar.appendChild(deleteButton);
			deleteButton.style.display = "none";
			graph.selectionModel.listChangeDispatcher.addListener(function() {
				if (graph.selectionModel.length > 0) {
					deleteButton.style.display = "";
				} else {
					deleteButton.style.display = "none";
				}
			});

			(i[Q.Styles.ARROW_TO] = !1), o.moveToCenter();
			var t = (new GridBackground(o), 10);
			o.interactionDispatcher.addListener(function(e) {
				if (e.kind == Q.InteractionEvent.ELEMENT_CREATED) {
					var o = e.data;
					return void (o instanceof Q.ShapeNode && (o.zIndex = 10));
				}
				if (e.kind == Q.InteractionEvent.ELEMENT_MOVE_END) {
					var i = e.datas;
					return void i.forEach(function(e) {
						if (e instanceof Q.Node && !(e instanceof Q.Group)) {
							var o = r(e.x, e.y);
							e.setLocation(o[0], o[1]);
						}
					});
				}
				if (e.kind == Q.InteractionEvent.ELEMENT_CREATED) {
					var o = e.data;
					if (!(o instanceof Q.Node)) return;
					var t = r(o.x, o.y);
					return void o.setLocation(t[0], t[1]);
				}
			});
		},
	});
});
